<template>
    <!--监测点统计-->
    <div class="right_monitoring_points">
        <div class="monitoring_point">
            <div class="monitor">
                <span></span>
                <span>监控点位</span>
            </div>
            <div class="quantity">
                <span>1271</span>
                <span>个</span>
            </div>
        </div>
        <div class="equipment_echarts">
            <chart-view
                :chart-option="EchartsMethods.MonitoringStatistics()"
                :auto-resize="true"
                height="100%"
            ></chart-view>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { EchartsMethods } from '@/chart/index';
</script>

<style scoped lang="scss">
.right_monitoring_points {
    height: 90%;
    .monitoring_point {
        width: 100%;
        height: 27%;
        margin-top: 4px;
        background: url(@/assets/image/monitoringPoint.png) no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px 0 18px;
        box-sizing: border-box;
        .monitor {
            display: flex;
            align-items: center;

            span {
                &:nth-of-type(1) {
                    width: 28px;
                    height: 32px;
                    background: url(@/assets/image/monitorback.png) no-repeat;
                    background-size: 100% 100%;
                    display: inline-block;
                    margin-right: 10px;
                }
                &:nth-of-type(2) {
                    font-size: 14px;
                    font-family: Source Han Sans CN;
                    color: #b4c1bf;
                }
            }
        }
        .quantity {
            display: flex;
            align-items: center;
            span {
                &:nth-of-type(1) {
                    font-size: 18px;
                    font-family: PangMenZhengDao;
                    color: #23fffc;
                }
                &:nth-of-type(2) {
                    font-size: 12px;
                    font-family: Source Han Sans CN;
                    color: #b4c1bf;
                }
            }
        }
    }
    .equipment_echarts {
        width: 100%;
        height: 73%;
        div {
            height: 100%;
        }
    }
}
</style>
